<template>
  <div class="configuration-management">
    <Row type="flex" justify="space-between" class="configuration-management-edit">
      <Form class="from" style="width: 100%" label-position="left" inline>
        <Row type="flex" justify="space-between">
          <Row>
            <FormItem :label-width="72">
              <div slot="label" style="transform: translateX(12px);">门店名称：</div>

              <Select @on-change="search" style="width:180px" filterable v-model="searchObj.shopId" label-in-value>
                <Option v-for="item in shopList" :label="item.shopName" :value="item.shopId" :key="item.shopId">{{
                  item.shopName
                }}</Option>
              </Select>
            </FormItem>

            <FormItem :label-width="72">
              <div slot="label" style="transform: translateX(12px);">单据编号：</div>
              <Input v-model="searchObj.voucherCode" autocomplete="off" placeholder="请输入" />
            </FormItem>
            <FormItem>
              <Button class="search-btn" type="primary" @click="search()">查询</Button>
            </FormItem>
          </Row>
          <Row>
            <FormItem v-if="hasPermission('moms:scm:repairview')" >
              <Button @click="handleNew">新增库存作废</Button>
            </FormItem>
          </Row>
          <!-- <Col span="2">
            <FormItem>
              <Button
                type="primary"
                @click="$router.push({ name: 'market_pointshop_goods_create' })"
              >上架商品</Button>
            </FormItem>
          </Col> -->
        </Row>
      </Form>
    </Row>

    <Table
      :max-height="resData.length > 10 ? 530 : 0"
      :loading="isloading"
      stripe
      :columns="columns"
      :data="resData"
      class="table-list"
    >
    </Table>
    <div class="page-box">
      <Page
        :total="total"
        ref="pages"
        :current.sync="searchObj.pageIndex"
        :page-size="searchObj.limit"
        @on-change="handlePage"
        @on-page-size-change="handlePageSize"
        show-sizer
        show-total
      />
    </div>
  </div>
</template>

<script>
// import { getShopList, shopDown, pointDelete } from '@/api/market/pointshop'
// import regExp from '@/libs/regExp'
import { getShopList } from '@/api/system/store'
import { repairList } from '@/api/inventory/supply'
export default {
  name: 'configuration_management_list',
  data () {
    return {
      searchObj: {
        merchantId: this.$store.state.user.merchantId,
        voucherCode: '',
        shopId: '',
        pageIndex: 1,
        limit: 10,
        offset: 0
      },
      // regExp: regExp,
      isloading: false,
      total: 0,
      resData: [],
      shopList: [],
      column: [
        {
          title: '门店信息',
          key: 'orgName',
          align: 'center'
        },
        { title: '原单据编号', key: 'voucherCode', align: 'center' },
        { title: '操作类型', key: 'operateTypeText', align: 'center' },
        {
          title: '操作日期',
          key: 'operateDate',
          align: 'center'
        },
        {
          title: '操作人',
          key: 'creatorName',
          align: 'center'
        },
        { title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            //  <i class="iconsys icondetail" @click="handleDetail(row)" title="查看详情"></i>
            return h('i', {
              class: ['iconsys', 'icondetail'],
              attrs: {
                title: '查看详情'
              },
              on: {
                click: () => {
                  // console.log('详情', params)
                  this.$router.push({
                    name: 'configuration_management_detail',
                    params: { id: params.row.id }
                  })
                }
              }
            })
          }
        }
      ]
    }
  },
  computed: {
    columns () {
      if (this.hasPermission('moms:scm:repairdetail')) return this.column
      return this.column.filter(item => item.key !== 'action')
    }
  },
  created () {
    this.getShopList()
  },
  activated () {
    if (this.searchObj.shopId) {
      this.repairList()
    }
  },
  methods: {
    handlePageSize (val) {
      this.searchObj.limit = val
      this.searchObj.offset = 0
      if (this.searchObj.pageIndex === 1) {
        this.repairList()
      } else {
        this.searchObj.pageIndex = 1
      }
    },

    handlePage (val) {
      this.searchObj.offset = (val - 1) * this.searchObj.limit
      this.repairList()
    },
    handleNew () {
      // console.log('新增作废')
      this.$router.push({
        name: 'configuration_management_new_receipt'
      })
    },

    search () {
      this.searchObj.offset = 0
      this.searchObj.pageIndex = 1
      this.repairList()
    },
    async repairList () {
      if (!this.searchObj.shopId) return this.$Message.error(`请选择门店`)
      const { shopId, offset, merchantId, voucherCode, limit } = this.searchObj
      this.isloading = true
      const res = await repairList({
        offset,
        merchantId,
        voucherCode,
        limit,
        shopList: [shopId]
      })
      this.isloading = false
      if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)
      this.resData = res.data.data || []
      this.total = res.data.totalCount
    },
    async getShopList () {
      const res = await getShopList({
        permissionCode: 'moms:scm:repairview', // 查看普通订单
        merchantId: this.$store.state.user.merchantId, // 商户id
        offset: 0,
        limit: 9999
      })
      if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)

      this.shopList = res.data.data || []
    }
  }
}
</script>
<style lang="less" scoped>
.configuration-management {
  // display: flex;
  // flex-direction: column;
  // min-height: 100%;
  // min-width: 1082px;
  // .from {
  //   margin-top: 24px;
  // }
  .configuration-management-edit {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: -4px;
  }
  .button_active {
    border: 1px solid #2d8cf0;
  }
  .search-btn {
    width: 80px;
  }
}
</style>
